<template>
  <div v-if="nvData">
    <div class="form-bar">
      <div v-if="nvData && nvData.layout && nvData.layout.label" class="form-label">{{nvData.layout.label}}</div>
      <div style="display: flex;flex-direction:row-reverse;margin-right: 10px; padding-top: 10px;padding-bottom: 10px">
          <span>
            <MetaDropdown :nvsData="nvData"></MetaDropdown>
          </span>
          <template v-if="toolbarButtons.length>0">
              <span :key = "index" style="margin-left: 5px" v-for="(fdLayout,index) in toolbarButtons">
                <BaseComponent :fv-data="createFvData(fdLayout)"
                               @define-event="handleEvent($event)"
                               ></BaseComponent>
              </span>
          </template>
      </div>
    </div>
    <el-form :inline="true" label-width="auto" :model="nvData.nv">
      <el-row>
        <el-col :key="index" :span="fdLayout.cols>0?fdLayout.cols:8" v-for="(fdLayout,index) in noneToolbarFdLayouts">
          <el-form-item v-if="isButtonControl(fdLayout.controlType) ">
                <BaseComponent :fv-data="createFvData(fdLayout)"  style="width: 100%" @define-event="handleEvent($event)"></BaseComponent>
            </el-form-item>
          <el-form-item :label="fdLayout.label" style="width:100%" v-if="!isButtonControl(fdLayout.controlType)">
            <BaseComponent :fv-data="createFvData(fdLayout)" style="width: 100%" @define-event="handleEvent($event)"></BaseComponent>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { computed, onMounted, getCurrentInstance } from 'vue'
import BaseComponent from '../basic/BaseComponent'
import FvData from '../../js/FvData'
import ConstDef from '../../js/ConstDef'
import frontRuleExecutor from "../../js/frule/FrontRuleExecutor";
import MetaDropdown from './components/MetaDropdown'
export default {
  name: 'NvForm',
  components: {
    BaseComponent,
    MetaDropdown
  },
  props: {
    nvData: {
      default: null,
      type: Object
    }
  },
  setup(props) {
    const currentInstance = getCurrentInstance();
    onMounted(() => {
      frontRuleExecutor.executeLayoutRules(currentInstance, props.nvData, {}, ConstDef.FRONT_RULE_MOUNTED);
    })
    const nv = computed(() => {
      return props.nvData.getNv()
    })

    const toolbarButtons = computed(() => {
      return props.nvData.layout.fdLayouts.filter((item) => item.buttonPosition === ConstDef.BUTTON_POSITION_TOOLBAR).reverse();
    });

    const noneToolbarFdLayouts = computed(() => {
      return props.nvData.layout.fdLayouts.filter((item) => item.buttonPosition !== ConstDef.BUTTON_POSITION_TOOLBAR);
    })

    function createFvData(fdLayout) {
      const fvData = new FvData(props.nvData.nvs, props.nvData.nv, props.nvData.nd, fdLayout.name, props.nvData.layout, fdLayout);
      return fvData;
    }

    function isButtonControl(controlType) {
      return controlType === ConstDef.CONTROL_TYPE_BUTTON;
    }

    function getCurrentNv() {
      return this.nvData.nv;
    }
    return {
      nv,
      createFvData,
      isButtonControl,
      toolbarButtons,
      noneToolbarFdLayouts,
      getCurrentNv
    }
  },
  methods: {
    getParentLayout() {
      let parent = this.$parent();
      while (parent != null) {
        if (parent.isNvLayout) { return parent; } else { parent = parent.$parent; }
      }
      return null;
    },
    getDataSource() {
      return this.getParentLayout().getDataSource();
    },
    handleEvent(event) {
      this.$emit("define-event", event)
    }
  }
}
</script>

<style scoped>
  .form-bar {
       display: flex;
       justify-content: space-between;
       align-items: center;
       background-color: grey;
       margin-bottom: 10px;
     }

  .form-label {
    text-align: left;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    color: white;
  }

  .el-col {
    width: 100%;
  }

</style>
